<template>
  <div class="video-container">
    <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
  </div>
</template>

<script>
import 'vue-video-player/src/custom-theme.css'
export default {
  data() {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        autoplay: false,
        muted: false,
        loop: false,
        preload: 'auto',
        language: 'zh-CN',
        aspectRatio: '16:8',
        fluid: true,
        sources: [{
          type: 'video/mp4',
          src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
        }],
        poster: '../../../assets/indexhot.png',
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true
        }
      }
    }
  }
}
</script>

<style scoped>
  .video-container {
    height: 100%;
    width: 100%;
  }
  .video-player {
    height: 100%;
  }
</style>
